<template>
    <userDialog
        v-model="visible"
        dialogTitle="添加小程序入口"
        width="880px"
        @handleCloseDialog="handleCloseDialog"
    >
        <template v-slot:userDiagContent>
            <dialogFormContent>
                <template v-slot:form_info="{ isShowInfoFold }">
                    <div v-show="isShowInfoFold">
                        <el-form
                            :model="formData"
                            :rules="rules"
                            class="user_form_content"
                            ref="appFormRef"
                        >
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item label="菜单权限" prop="name">
                                        <el-input
                                            v-model="formData.name"
                                            placeholder="请输入菜单权限"
                                        />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="图标：" prop="icon">
                                        <el-input
                                            v-model="formData.icon"
                                            placeholder="请输入图标名称"
                                        />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item
                                        label="数据类型标识："
                                        prop="perm"
                                    >
                                        <el-input
                                            v-model="formData.perm"
                                            placeholder="请输入数据类型标识"
                                        />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="状态" prop="status">
                                        <el-select
                                            v-model="formData.status"
                                            placeholder="选择显示状态"
                                        >
                                            <template
                                                v-for="item in appShowSataus"
                                            >
                                                <el-option
                                                    :label="item.label"
                                                    :value="item.value"
                                                />
                                            </template>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item
                                        label="显示顺序："
                                        prop="sort"
                                    >
                                        <el-input
                                            v-model="formData.sort"
                                            placeholder="请输入显示顺序"
                                        />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item
                                        label="后端路由标识："
                                        prop="backendRoute"
                                    >
                                        <el-input
                                            v-model="formData.backendRoute"
                                            placeholder="请输入后端路由标识"
                                        />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                </template>
            </dialogFormContent>
            <div class="btnStyle mt-20px">
                <el-button type="primary" @click="submitForm()">
                    提交
                </el-button>
                <el-button type="info" @click="resetClick()"> 重置 </el-button>
            </div>
        </template>
    </userDialog>
</template>

<script setup lang="ts">
import { appShowSataus, appVO } from "@/views/system/permissionManager/index";
import MenuAPI from "@/api/system/menu";

const emit = defineEmits(["handleQuery"]);
const visible = defineModel("modelValue", {
    type: Boolean,
    required: true,
    default: false,
});

const appFormRef = ref();

const formData = ref<appVO>({
    name: "",
    menuType: "2",
    icon: "",
    status: 1,
    perm: "",
    sort: 0,
    backendRoute: "",
});

// 表单验证规则
const rules = reactive({
    name: [{ required: true, message: "请输入菜单权限", trigger: "blur" }],
    perm: [{ required: true, message: "请输入数据类型标识", trigger: "blur" }],
    backendRoute: [
        { required: true, message: "请输入后端路由标识", trigger: "blur" },
    ],
});

/** 菜单保存提交 */
function submitForm() {
    appFormRef.value.validate((isValid: boolean) => {
        if (isValid) {
            MenuAPI.add(formData.value as any).then(() => {
                ElMessage.success("新增成功");
                handleCloseDialog();
                emit("handleQuery");
            });
        }
    });
}

// 关闭弹窗
function handleCloseDialog() {
    console.log("1212");
    visible.value = false;
    appFormRef.value.resetFields();
    appFormRef.value.clearValidate();
    formData.value.id = undefined;
}

function resetClick() {
    appFormRef.value.resetFields();
    appFormRef.value.clearValidate();
}

defineExpose({
    handleCloseDialog,
});
</script>

<style lang="scss" scoped>
.btnStyle {
    padding: 0 255px;
    @include flexLayout;
    justify-content: space-between;
    .el-button {
        font-size: 16px;
        padding: 20px 40px;
    }
}
.user_form_content {
    :deep(.el-form-item) {
        display: flex;
        label {
            width: 140px;
        }
        .el-input,
        .el-select {
            height: 32px;
            width: 372px;
            .el-select__wrapper {
                height: 32px;
                line-height: 32px;
            }
        }
    }
}
</style>
